@import "../../../../../common/colors.scss";
@import "../../../../../mixins/utils.scss";
@import "../../../common/var.scss";

@include theme($theme){
    .side-bar{
        border: none;
        .left-title{
            text-align: center;
            font-weight: bolder;
            color: $grey100;
            letter-spacing: 2px;
            height: $sidebar-height;
            line-height: $sidebar-height;
            background-color: $sidebar-background;
            border-right: $sidebar-background;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            // cursor: pointer;

             // logo
             & .logo{
                // position: fixed;
                // left: 5px;
                // display: inline-block;
                // background:url('../../../../assets/images/logo-white.png');
                // background-repeat:no-repeat;
                // background-size: 100% 100%;
                // width: 50px;
                // height: 20px;
                // margin-top: 10px;
            }
        }
        .left-title-image{
            padding: 0px 2px 0px 2px;
            .image{
                display: inline-block;
                background:url('../../../../assets/images/logo-white.png');
                // width: $sidebar-height;
                // height: calc(#{$sidebar-height} - 4px);
                background-repeat:no-repeat;
                background-size: 100% 100%;
                width: $sidebar-height;
                height: $sidebar-height;
            }
        }
        .side-bar-menu{
            max-height: calc(100vh - #{$sidebar-height});
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            // & .el-menu-item{
            //     & :hover{
            //         outline: none;
            //         background-color: $blue400;
            //     }
                
            // }
            &::-webkit-scrollbar {
                /*滚动条整体样式*/
                width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
                height: 1px;
            }
            &::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px $blue200;
                background   : #535353;
            }
            &::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                box-shadow   : inset 0 0 5px $white;
                border-radius: 10px;
                background   : #ededed;
            }

        }
    }
}